{% extends "./inc_base.html" %}
{% block style%}
<link href="/static/assets/css/layout-shop.css" rel="stylesheet" type="text/css" />
{% if controller.ctx.query.class %}
{%model data="list",table="category",where='{"pid":45,"sort":'+controller.ctx.query.class+'}',limit="1",cache="1"%}
{%if list|length > 0%}
<script type="text/javascript">
  location.assign('/{{list[0].name}}');
</script>
{%else%}
<script type="text/javascript">
  location.assign('/centershop');
</script>
{%endif%}
{% endif %}
{% endblock %}
{% block content %}
{%set cate = category.id|get_cate()%}
{%if category.pid !=0%}
{%column data="column",pid=category.pid%}
{%else%}
{%column data="column",cid=category.id%}
{%endif%}
<!-- 
PAGE HEADER 

CLASSES:
.page-header-xs	= 20px margins
.page-header-md	= 50px margins
.page-header-lg	= 80px margins
.page-header-xlg= 130px margins
.dark			= dark page header

.shadow-before-1 	= shadow 1 header top
.shadow-after-1 	= shadow 1 header bottom
.shadow-before-2 	= shadow 2 header top
.shadow-after-2 	= shadow 2 header bottom
.shadow-before-3 	= shadow 3 header top
.shadow-after-3 	= shadow 3 header bottom
-->
<section class="page-header page-header-xs" >
    <div class="container">
        {%if column|length > 0 and breadcrumb[0].id != category.id%}
        <h1>{{category.title}}-产成品</h1>
        {% else %}
        <h1>全部商品-产成品</h1>
        {%endif%}
        <!-- breadcrumbs -->
        <ol class="breadcrumb {%if column|length==0%} breadcrumb-inverse {%endif%}">
            <li><a href="/">首页</a></li>
            {%for val in breadcrumb %}
            {% if val.id == category.id %}
            <li class="active">{{val.title}}</li>
            {% else %}
            <li><a href="{{val.url}}">{{val.title}}</a></li>

            {% endif %}
            {% endfor %}
        </ol><!-- /breadcrumbs -->
        <!-- page tabs -->

        {%if column|length>0%}
        <ul class="page-header-tabs list-inline">

            <li {%if breadcrumb[0].id == category.id %}class="active"{%endif%}><a href="{{breadcrumb[0].url}}">全部</a></li>
            {%for val in column%}
            <li  {%if val.id == category.id %}class="active"{%endif%}><a href="{{val.url}}">{{val.name}}</a></li>
            {%endfor%}
        </ul>
        {%endif%}
        <!-- /page tabs -->
    </div>
</section>
<!-- /PAGE HEADER -->




<!-- -->
<section>
    <div class="container">
        <!--分类信息-->
        {% include "./inc_sort.html" %}
        <!--/分类信息-->
        <div class="row">

            <!-- RIGHT -->
            <div class="col-lg-10 col-md-10 col-sm-10 ">

                {%if breadcrumb[0].id == category.id%}
                <!-- CAROUSEL -->
                {#<div class="owl-carousel buttons-autohide controlls-over margin-bottom-30 radius-4" data-plugin-options='{"singleItem": true, "autoPlay": 6000, "navigation": true, "pagination": true, "transitionStyle":"fade"}'>
                    <!-- item -->
                    <div>
                        <div class="caption-slider-default">
                            <div class="display-table">
                                <div class="display-table-cell vertical-align-middle">
                                    <div class="caption-container text-left">
                                        <h2>全场 <strong>限时折扣</strong> &ndash; 50% OFF</h2>
                                        <p>
                                            这是一个商城分类页面的广告位<br />
                                            你可以放置您的推广营销内容.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <img class="img-responsive radius-4" src="/static/assets/images/top_2.png" width="851" height="335" alt="">
                    </div>
                    <!-- /item -->

                    <!-- item -->
                    <div>

                        <div class="caption-slider-default">
                            <div class="display-table">
                                <div class="display-table-cell vertical-align-middle">
                                    <div class="caption-container text-left">
                                        <h2>演示广告位置 <strong>就是这里</strong></h2>
                                        <p>
                                            这是一个商城分类页面的广告位<br />
                                            你可以放置您的推广营销内容.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <img class="img-responsive radius-4" src="/static/assets/images/top_1.png" width="851" height="335" alt="">
                    </div>
                    <!-- /item -->

                </div>#}
                <!-- /CAROUSEL -->
                {%endif%}


                <!-- LIST OPTIONS -->
                <div class="panel panel-default">
                    <div class="panel-body padding-6">
                        <div class="clearfix shop-list-options nomargin" style="height: 35px;overflow: hidden">
                            <div class=" pull-right">
                                {{pagination | safe}}
                            </div>


                            {#<div class="options-left">
                                <select>
                                    <option value="pos_asc">默认排序 高</option>
                                    <option value="pos_desc">默认排序 低</option>
                                    <option value="name_asc">销量排序 高</option>
                                    <option value="name_desc">销量排序 低</option>
                                    <option value="price_asc">价格排序 高</option>
                                    <option value="price_desc">价格排序 低</option>
                                </select>

                                <a class="btn active fa fa-th" href="shop-4col-left.html"><!-- grid --></a>
                                <a class="btn fa fa-list" href="shop-1col-left.html"><!-- list --></a>
                            </div>#}

                        </div>
                    </div>
                </div>

                <!-- /LIST OPTIONS -->


                <ul class="shop-item-list1 row list-inline " style="margin-left:-5px;margin-right: -5px ">
                    {% for item in list%}
                    <!-- ITEM -->
                    <li class="col-xs-6 col-lg-3 col-md-3 col-sm-3 ">
                        <div class="panel panel-default">
                            <div class="panel-body shop-item nomargin nopadding">
                                {% set pic = item.pics|strToArray%}
                                <div class="thumbnail nomargin noborder" >
                                    <!-- product image(s) -->
                                    <a class="shop-item-image" href="{{item.name|get_url(item.id)}}" title="{{item.title}}" style="height: 216px;overflow: hidden">
                                        <img class="img-responsive lazy" style="height: 100%" data-original="{{pic[0]|get_pic('m=1,w=260,h=260')}}" alt="shop first image" />
                                        {% if pic|length >1%}
                                        <img class="img-responsive lazy" style="height: 100%" data-original="{{pic[1]|get_pic('m=1,w=260,h=260')}}" alt="shop hover image" />
                                        {% endif %}
                                    </a>
                                    <!-- /product image(s) -->

                                    <!-- product more info -->
                                    <!--<div class="shop-item-info">
                                        <span class="label label-success">新品</span>
                                        <span class="label label-danger">热卖</span>
                                    </div>-->
                                    <!-- /product more info -->
                                </div>
                            </div>
                            <div class="panel-footer padding-3">
                                <div class="shop-item-summary text-center">

                                    <!-- price -->
                                    {#<div class="shop-item-price text-danger f-16 nomargin">
                                        {% if item.price %}
                                        {% if item.price|get_price_format('2') %}<span class="line-through f-14">¥{{item.price|get_price_format('2')}}</span>{%endif%}
                                        ¥{{item.price|get_price_format('1')}}
                                        {% else %}
                                        暂不开放购买
                                        {% endif %}
                                    </div>#}
                                    <!-- /price -->
                                    <!-- rating -->
                                    <div class="shop-item-rating-line">
                                        <div class="rating rating-5 size-13"><!-- rating-0 ... rating-5 --></div>
                                    </div>
                                    <!-- /rating -->

                                    <h2 class="text-intercept"><a class=""  href="{{item.name|get_url(item.id)}}" title="{{item.title}}">{{item.title}}</a></h2>
                                </div>
                                {#
                                {% set stock = item.id|getmodelfield(item.model_id,'total_stock') %}
                                {% if stock == 0%}
                                <!-- buttons -->
                                <div class="shop-item-buttons text-center">
                                    <span class="out-of-stock">已售罄</span><!-- add .clean to remove css characteres -->
                                </div>
                                {% endif %}
                                #}
                            </div>
                        </div>


                    </li>
                    <!-- /ITEM -->
                    {%endfor%}

                </ul>


                <!-- Pagination Default -->
                <!-- LIST OPTIONS -->
                <div class="panel panel-default">
                    <div class="panel-body padding-6">
                        <div class="clearfix shop-list-options nomargin" style="height: 35px;overflow: hidden">
                            <div class=" pull-right">
                                {{pagination | safe}}
                            </div>


                            {#<div class="options-left">
                                <select>
                                    <option value="pos_asc">默认排序 高</option>
                                    <option value="pos_desc">默认排序 低</option>
                                    <option value="name_asc">销量排序 高</option>
                                    <option value="name_desc">销量排序 低</option>
                                    <option value="price_asc">价格排序 高</option>
                                    <option value="price_desc">价格排序 低</option>
                                </select>

                                <a class="btn active fa fa-th" href="shop-4col-left.html"><!-- grid --></a>
                                <a class="btn fa fa-list" href="shop-1col-left.html"><!-- list --></a>
                            </div>#}

                        </div>
                    </div>
                </div>

                <!-- /LIST OPTIONS -->
                <!-- /Pagination Default -->

            </div>


            <!-- LEFT -->
            <div class="col-lg-2 col-md-2 col-sm-2">
                <!-- INLINE SEARCH -->
                <div class="inline-search clearfix margin-bottom-20">
                    <form action="/search" method="get" class="widget_search" target="_blank">
                        <input type="search" placeholder="请输入关键词..." id="q" name="q" class="serch-input">
                        <button type="submit">
                            <i class="fa fa-search"></i>
                        </button>
                    </form>
                </div>
                <!-- /INLINE SEARCH -->
                <!-- CATEGORIES -->
                <div class="panel panel-default side-nav">
                    <div class="panel-heading">
                        <h2 class="panel-title">商品分类</h2>
                    </div>
                    <div class="panel-body" style="padding: 10px 0 0 10px">
                        <ul class="list-group list-group-bordered  uppercase nomargin">
                            <!--{{breadcrumb[1].id}}-->
                            {% column data="clist",tree=breadcrumb[0].id %}
                            {% for val in clist %}
                            <!--{%if breadcrumb[1].id == val.id%} active {%endif%}-->
                            <li class="list-group-item {%if breadcrumb[1].id == val.id%}active {%endif%} ">
                                <a  {% if val.children %}class="dropdown-toggle "{%endif%} href="{{val.url}}">{{val.name}}</a>
                                {% if val.children %}
                                <ul >
                                    {% for _val in val.children %}
                                    <li class="{%if breadcrumb[2].id == _val.id%}active {%endif%}"><a href="{{_val.url}}"><span class="size-11 text-muted pull-right">(123)</span> {{_val.name}}</a></li>
                                    {%endfor%}

                                </ul>
                                {%endif%}
                            </li>
                            {%endfor%}

                        </ul>.
                    </div>
                </div>

                <!-- /CATEGORIES -->
                <div class="panel panel-default hotgoods">
                    <div class="panel-heading">
                        <h2 class="panel-title">热卖</h2>
                    </div>
                    {%topic data="hotgoods",limit="9",cid=category.id,type="hot",cache="1000"%}
                    <div class="panel-body padding-10" >
                        <div class="owl-carousel featured nomargin" data-plugin-options='{"singleItem": true, "stopOnHover":false, "autoPlay":false, "autoHeight": false, "navigation": true, "pagination": false}'>
                            {%- for items in hotgoods | slice(3) %}
                                <div><!-- SLIDE 1 -->
                                    <ul class="list-unstyled nomargin nopadding text-left">
                                        {%- for item in items %}
                                        {% set pic = item.pics|strToArray%}
                                        <li class="clearfix"><!-- item -->
                                            <div class="thumbnail featured clearfix nomargin" style="height: 150px;overflow: hidden">
                                                <a href="{{item.name|get_url(item.id)}}" target="_blank">
                                                    <img style="height: 100%" src="{{pic[0]|get_pic('m=1,w=140,h=140')}}" width="141" height="141" alt="featured item">
                                                </a>
                                            </div>
                                            <div class="size-16 text-left text-danger">
                                                ¥{{item.price|get_price_format('1')}}</div>
                                            <div class="rating rating-5 size-13 width-100 text-left"><!-- rating-0 ... rating-5 --></div>
                                            <a class="block size-12 elipsis" href="{{item.name|get_url(item.id)}}" target="_blank">{{item.title}}</a>


                                        </li><!-- /item -->
                                        {% if not loop.last%}
                                        <div class="divider margin-top-6 margin-bottom-6"><!-- divider --></div>
                                        {%endif%}
                                        {%- endfor %}

                                    </ul>
                                </div><!-- /SLIDE 1 -->

                            {%- endfor %}


                        </div>

                    </div>
                </div>

            </div>

        </div>

    </div>
</section>
<!-- / -->

{% endblock %}

{% block script%}
<!-- PAGE LEVEL SCRIPTS -->
<script type="text/javascript" src="/static/assets/js/view/demo.shop.js"></script>

{% endblock %}